<template>
  <div class="container">
    <!--背景-->
    <div class="bg"><img src="../../../../static/img/bg-img.png"></div>
    <!--个人详情-->
    <div class="userBox">
      <!--个人信息-->
      <div class="userimg">
      </div>
      <p class="nickName">未登录<span class="pen" @click="myDetail"></span></p>
      <p class="sign" @click="myDetail">清编辑.....</p>
      <!--.-->
      <div class="section">
        <div class="section-item" @click="ShowOrder">
          <img class="section-img" src="../../../../static/img/my-order.png">
          <p>我的订单</p>
        </div>
        <div class="section-item" @click="ShowWayLine">
          <img class="section-img" src="../../../../static/img/wayline.png">
          <p>常用路线</p>
        </div>
        <div class="section-item" @click="ShowDiscounts">
          <img class="section-img" src="../../../../static/img/my-coupon.png">
          <p>优惠券</p>
        </div>
      </div>
      <!--list-->
      <div class="listBox">
        <div class="listItem" @click="myDriver">
          <img class="listItem-img" src="../../../../static/img/driver.png">
          <div class="listItem-info">
            <p>我的司机</p>
            <span>未添加</span>
          </div>
        </div>
        <div class="listItem">
          <img class="listItem-img" src="../../../../static/img/invite.png">
          <div class="listItem-info">
            <p>邀请好友</p>
            <span>分享给好友</span>
          </div>
        </div>
        <div class="listItem" @click="ShowMsg">
          <img class="listItem-img" src="../../../../static/img/msg.png">
          <div class="listItem-info">
            <p>消息中心</p>
            <span>消息及时查看</span>
          </div>
        </div>
        <div class="listItem" @click="ShowSet">
          <img class="listItem-img" src="../../../../static/img/set.png">
          <div class="listItem-info">
            <p>设置</p>
            <span>协议，收费标准</span>
          </div>
        </div>
        <div class="listItem">
          <img class="listItem-img" src="../../../../static/img/service.png">
          <div class="listItem-info">
            <p>客服中心</p>
            <span>24小时在线</span>
          </div>
        </div>
        <div class="listItem" @click="ShowDriver">
          <img class="listItem-img" src="../../../../static/img/freight.png">
          <div class="listItem-info">
            <p>货运</p>
            <span>我是货运人员</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      MyList: [
        {
          img: '~static/img/driver.png',
          text: '我的司机',
          intro: '未添加'
        }, {
          img: '~static/img/invite.png',
          text: '邀请好友',
          intro: '分享给好友'
        }, {
          img: '~static/img/msg.png',
          text: '消息中心',
          intro: '消息及时查看'
        }, {
          img: '~static/img/set.png',
          text: '设置',
          intro: '协议，收费标准'
        }, {
          img: '~static/img/service.png',
          text: '客服中心',
          intro: '24小时在线'
        }, {
          img: '~static/img/freight.png',
          text: '货运',
          intro: '我是货运人员'
        }
      ],
      sectionList: [
        {}
      ],
      latitude: '',
      longitude: ''
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '个人中心'
    })
  },
  methods: {
    myDetail () {
      wx.navigateTo({
        url: './detail/main'
      })
    },
    ShowSet () {
      wx.navigateTo({
        url: './setting/main'
      })
    },
    myDriver () {
      wx.navigateTo({
        url: './myDriver/main'
      })
    },
    ShowMsg () {
      wx.navigateTo({
        url: './msg/main'
      })
    },
    ShowWayLine () {
      wx.navigateTo({
        url: './wayLine/main'
      })
    },
    ShowDiscounts () {
      wx.navigateTo({
        url: './discounts/main'
      })
    },
    ShowOrder () {
      wx.switchTab({
        url: '/pages/client-side/order/main'
      })
    },
    ShowDriver () {
      wx.navigateTo({
        url: '/pages/driver-side/driver/main'
      })
    }
  }
}
</script>

<style scoped>
.container{
  position: relative;
}
.bg{
  width: 100%;
  height: 400rpx;
  position: absolute;
  top: -104rpx;
}
.userBox{
  width: 100%;
  height: 949rpx;
  position: absolute;
  top: 216rpx;
  background-color: #fff;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  text-align: center;
  font-size: 32rpx;
  color: #353535;
}
.userimg{
  width:150rpx;
  height:141rpx;
  border-radius:50%;
  margin: -82rpx auto 0 auto;
  background:url("http://img.gek6.com/Fp_pee6R1zF0FSAJVNot8rmIojm1") no-repeat center/cover;
  background-color: dimgray;
}
.nickName{
  padding-top: 24rpx;
  padding-bottom: 18rpx;
}
.sign{
  font-size: 22rpx;
}
.pen{
  width: 21rpx;
  height: 21rpx;
  background: url("~static/img/pen.png") no-repeat center/cover;
  display: inline-block;
  margin-left: 10rpx;
}
.section{
  width: 590rpx;
  height: 160rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  justify-items: center;
  margin: 52rpx auto;
}
.section-item{
  width: 160rpx;
  height: 160rpx;
  background-color: #f5f5f5;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.section-img{
  width: 54rpx;
  height: 54rpx;
  margin-top: 30rpx;
}
.section-item p{
  margin: auto auto;
  vertical-align: middle;
  font-size: 24rpx;
}

.listBox{
  width: 100%;
  height: 384rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.listItem{
  width: 293rpx;
  height: 127rpx;
  display: flex;
  flex-direction: row;
  padding-left: 80rpx;
  align-items: center;
}
.listItem:nth-child(odd){
  border: 1px solid #ececec;
  border-left: none;
}
.listItem:nth-child(even){
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec ;
}
.listItem-img{
  width: 54rpx;
  height: 54rpx;
}
.listItem-info{
  text-align: left;
  margin-left: 25rpx;
}
.listItem-info p{
  font-size: 28rpx;
  color: #353535;
}
.listItem-info span{
  font-size: 22rpx;
  color: #bfbfbf;
}
</style>
